<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表</title>
		<script src="js/vue.js"></script><!-- 必须先导入vue -->
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/common.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="app">
			<el-button size="mini" @click="add">添加新用户</el-button>
			<el-table size="small" :data="tableData" border style="width: 100%">
				<el-table-column prop="id" label="用户id" width="180">
				</el-table-column>
				<el-table-column prop="uname" label="用户名">
				</el-table-column>
				<el-table-column prop="upwd" label="密码">
					<template slot-scope="scope">
						******
					</template>
				</el-table-column>
				<el-table-column width="250px" label="操作">
					<template slot-scope="scope">
						<el-button size="mini"  @click="updateUser(scope.row)">编辑</el-button>
						<el-button size="mini"  @click="updateRole(scope.row)">用户角色</el-button>
						<el-button type="danger" size="mini"  @click="deleteUser(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog title="新增用户" :visible.sync="FormVisible">
				<el-form :model="formadd">
					<el-form-item label="用户名" label-width="80px">
						<el-input v-model="formadd.uname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" label-width="80px">
						<el-input v-model="formadd.upwd" autocomplete="off"></el-input>
					</el-form-item>
			
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="FormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addsubmit">确 定</el-button>
				</div>
			</el-dialog>
			
			<el-dialog title="修改用户" :visible.sync="updateFormVisible">
				<el-form :model="formadd">
					<el-form-item label="用户名" label-width="80px">
						<el-input v-model="formadd.uname" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" label-width="80px">
						<el-input  v-model="formadd.upwd" autocomplete="off"></el-input>
					</el-form-item>
			
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="updateFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="updatesubmit">确 定</el-button>
				</div>
			</el-dialog>
			
			<el-drawer title="用户角色维护"
			:visible.sync="drawer" 
			>
			
			<br/>
			<span style="color: gray;font-size: 12px;">当前用户角色：</span>
			<template v-for="obj in userRoleList">
				 <el-button  icon="el-icon-minus" @click="deleteUserRole(obj.id)" size="mini">{{obj.description}}</el-button>
					&nbsp;
			</template>
			<hr/>
			<template v-for="obj in roleList">
				<el-button  icon="el-icon-plus"  @click="addUserRole(obj.id,obj)" size="mini">{{obj.description}}</el-button>
					&nbsp;
			</template>
			</el-drawer>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				drawer:false,
				tableData:[],
				FormVisible:false,
				updateFormVisible:false,
				formadd:{
					id:"",
					uname:"",
					upwd:""
				},nowUserId:0,//当前操作的而用户id
				userRoleList:[],
				roleList:[]
			},methods:{
				deleteUser(row){
				this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post(API + "s/deleteuser", row).then(res => {
						if (res.data) {
							this.$message.success("删除成功")
							this.initData();
						} else {
							this.$message("删除失败")
						}
					})
				})	
				},deleteUserRole(id){//根据用户id删除一个角色
				this.userRoleList=this.userRoleList.filter(function(obj){
					return obj.id !=id;
				})
				axios.post(API+"s/deleteByUserIdAndRoleId",{"userid":this.nowUserId,"roleid":id}).then(res=>{
					console.log(res.data.data)
				})
				},addUserRole(id,obj){
					axios.post(API+"s/addByUserIdAndRoleId",{"userid":this.nowUserId,"roleid":id}).then(res=>{
						console.log(res.data.data)
						this.userRoleList.push(obj)
					})
				},
				updatesubmit(){
					axios.post(API+"s/updateUser", this.formadd).then(res => {
						if (res.data) {
							this.$message.success('修改成功');
							this.initData();
						} else {
							this.$message.error('修改失败');
						}
					this.updateFormVisible=false;
					})
				},
				initData(){
					axios.get(API+"s/userlist").then(res=>{
						this.tableData=res.data.data.userList
					})
				},add(){
					this.FormVisible=true
				},addsubmit(){
					axios.post(API+"s/register", this.formadd).then(res => {
						if (res.data) {
							this.$message.success('新增成功');
							this.initData();
						} else {
							this.$message.error('新增失败');
						}
					this.FormVisible=false;
					})
				},updateUser(row){
					this.updateFormVisible=true;
					this.formadd={
						id:row.id,
						uname:row.uname,
						upwd:row.upwd
					}
				},updateRole(row){
					this.nowUserId=row.id;
					this.drawer=true;
					axios.get(API+"s/selectRoleByuserId/"+this.nowUserId).then(res=>{
						this.userRoleList=res.data.data.roleList
					})
					this.allRole();
				},allRole(){//获取所有角色集合
					axios.get(API+"s/selectAllRole").then(res=>{
						this.roleList=res.data.data.roleList
					})
				}
			},mounted(){
				this.initData();
			}
		})
	</script>
</html>